<script setup>
  import { reactive, watch, ref } from 'vue';
  import { useAccount } from 'vagmi';
  import { sendValidateCode as sendValidateCodeApi, register as registerApi } from '/@/api/user';
  import { Button, Input, InputPassword, Form, FormItem, InputSearch } from '@arco-design/web-vue';
  import { useWalletSignature } from './hooks';

  const { address: addressRef } = useAccount();
  const { data: signatureRef } = useWalletSignature();
  const formRef = ref();
  const form = reactive({
    address: addressRef.value,
    sign: signatureRef.value,
    email: '',
    code: '',
    password: '',
  });
  const emailSignPending = ref(false);
  const emailSignLabel = ref('发送');

  watch(addressRef, (address) => {
    if (address) {
      form.address = address;
    }
  });
  watch(signatureRef, (signature) => {
    if (signature) {
      form.signature = signature;
    }
  });

  async function sendValidateCode() {
    if (emailSignPending.value) {
      return;
    }
    emailSignPending.value = true;
    countTime();
    await sendValidateCodeApi({ email: form.email });
  }

  function countTime() {
    let waitTime = 60;
    run();

    function run() {
      emailSignLabel.value = waitTime-- + '秒后可重发';
      if (waitTime > 0) {
        setTimeout(run, 1000);
      } else {
        emailSignLabel.value = '重发';
        emailSignPending.value = false;
      }
    }
  }

  async function register(data) {
    if (data.errors) {
      return;
    }
    await registerApi(data.values);
  }
</script>

<template>
  <div class="text-blank text-[32px] text-center font-bold">绑定邮箱（选填）</div>
  <Form :model="form" :ref="formRef" @submit="register" layout="vertical">
    <FormItem
      field="signature"
      label="连接加密钱包"
      help="若要变更地址，请直接操作钱包切换"
      :rules="[{ required: true, message: '请在钱包中签名以完成操作' }]"
    >
      <Button :disabled="true" :loading="isLoading">{{ form.address }}</Button>
    </FormItem>
    <FormItem field="email" label="邮箱地址">
      <Input placeholder="请输入你的邮箱地址" v-model="form.email" />
    </FormItem>
    <FormItem field="code" label="验证码">
      <InputSearch
        searchButton
        placeholder="请输入你的验证码"
        v-model="form.code"
        :buttonProps="{ disabled: emailSignPending }"
      >
        <template #button-default
          ><div @click="sendValidateCode">{{ emailSignLabel }}</div></template
        >
      </InputSearch>
    </FormItem>
    <FormItem field="password" label="密码">
      <InputPassword placeholder="请输入你的密码" v-model="form.password" />
    </FormItem>
    <div>提醒：绑定邮箱后，可使用邮箱登录当前钱包的PoleStar账号。</div>
    <div class="mt-[18px] flex justify-between">
      <Button class="w-[180px] h-[60px]" type="primary" html-type="submit">确认绑定</Button>
      <Button class="w-[180px] h-[60px]" type="primary" html-type="submit">下次绑定</Button>
    </div>
    <div class="mt-[24px] text-center text-[14px]"
      >已有账号<span class="text-[#5F70FF] cursor-pointer" @click="jumpToLogin">去登录</span></div
    >
  </Form>
</template>
